<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
       <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.id?'修改文章':'发布文章'}}</el-breadcrumb-item>
      </el-breadcrumb>
      </div>
      <el-form ref="form" :model="article" :rules="formRoules" label-width="60px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- <el-input type="textarea" v-model="article.content"></el-input> -->
          <el-tiptap
            v-model="article.content"
            height="330px"
            :extensions="extensions"
            lang="zh"
            placeholder="请输入文章内容"
            ></el-tiptap>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="article.cover.type">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道" prop="channel_id">
          <el-select v-model="article.channel_id" placeholder="请选择频道">
            <!-- <el-option label="全部" :value="1"></el-option> -->
            <el-option :label="channel.name" :value="channel.id" v-for="(channel, index) in channels" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onPublish(false)">{{$route.query.id?'修改':'发布'}}</el-button>
          <el-button @click="onPublish(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getUserChannels,createArticle,updateArticle,getArticle,uploadImage} from '../../api/user';
import 'element-tiptap/lib/index.css';
import {
  // 需要的 extensions
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  FontSize,
  Image,
  CodeBlock,
  TextColor,
  TextHighlight
} from 'element-tiptap';
export default {
  name: "Publish",
  created() {
    this.loadUserChannels()

    // 如果路由路径参数有id 则请求展示数据
    if(this.$route.query.id){
        this.loadArticle()
    }
  },
  data() {
    return {
      article: {
          title: '',//文章标题
          content: '', //文章内容
          cover:{  //文章封面
            type: 0, //封面类型 -1自动 0无图 1-1张 3-3张
            images: [] //封面图片地址
          },
          channel_id:null,
          // id:''
        },
        channels:[],
        extensions: [  //富文本编辑器
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic(),
        new Strike(),
        new Image({
          async uploadRequest(file){
            const fd=new FormData()
            fd.append('image',file)
            const data=await uploadImage(fd)
            // console.log(data);
            return data.data.data.url
          }
        }),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new TodoItem(),
        new TodoList(),
        new TextColor(), //文本颜色
        new TextHighlight(), //背景色
        new HorizontalRule(),   //分割线
        new Fullscreen(), //全屏
        new Preview(),  //预览
        new FontSize(), //字体
        new CodeBlock(),//代码块
      ],
      formRoules:{
        title:[
          {required:true,message:'请输入文章标题',trigger:'blur'},
          { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
          ],
        content:[
          // {required:true,message:'请输入文章标题',trigger:'blur'},
          {validator(rule,value,callback){
            // console.log(value);
            if(value==='<p></p>'||value===''){
              callback("请输入文章内容")
            }else{
              callback()
            }
          },trigger:'change'},
          {required:true,message:'请输入文章内容',trigger:'blur'}
          ],
        channel_id:[{required:true,message:'请选择文章频道',trigger:'blur'}]
      }
    };
  },
  props: {
    // articleId:{
    //   type:[Number,Object,String]
    // }
  },
  components: {
    'el-tiptap': ElementTiptap,
  },
  methods: {
    async loadUserChannels(){
      const {data}=await getUserChannels()
      // console.log(data);
      this.channels=data.data.channels
    },
    async onPublish(draft){
      this.$refs.form.validate(async valid=>{
        if(!valid){
          // 如果表单验证错误 则直接返回
          return
        }else{
          // 如果是修改文章，则执行修改操作
            if(this.$route.query.id){
              const {data} =await updateArticle(this.$route.query.id,this.article,draft)
              console.log(data);
              this.$message({
              message:`${draft?'存入草稿':'修改'}成功`,
              type:'success'
            })
            }
            else{
              // 否则执行添加操作
            const {data} = await createArticle(this.article,draft)
            // console.log(data);
              this.$message({
                message:`${draft?'存入草稿':'发布'}成功`,
                type:'success'
              })
            }
        }
      })
    },
    // 修改文章加载文章内容
    async loadArticle(){
      const {data} = await getArticle(this.$route.query.id)
      // console.log(data);
      this.article =data.data
    }
  },
};
</script>

<style lang="less" scoped></style>
